<template>
  <!-- 使用对话框模式 -->
  <q-dialog
    v-model="isOpen"
    @hide="handleClose"
    class="video-call-dialog"
    :class="{ 'voice-only': props.isVoiceOnly }"
    :maximized="false"
    :persistent="true"
    :auto-close="false"
    no-route-dismiss
    no-esc-dismiss
    no-backdrop-dismiss
    :square="false"
    :no-refocus="true"
  >
    <q-card class="video-call-card" :class="{ 'voice-only': props.isVoiceOnly }">
      <div class="video-call-container video-call-dialog-container" :class="{ 'voice-only': props.isVoiceOnly }">
        <VideoCallContent
          ref="videoCallContentRef"
          :target-user-id="props.targetUserId"
          :target-name="props.targetName"
          :current-user-id="props.currentUserId"
          :get-user-initial="props.getUserInitial"
          :is-voice-only="props.isVoiceOnly"
          :is-group-call="props.isGroupCall"
          :group-members="props.groupMembers"
          :is-connecting="isConnecting"
          :loading-text="loadingText"
          :call-status="callStatus"
          :is-muted="isMuted"
          :is-video-off="isVideoOff"
          :is-local-video-active="isLocalVideoActive"
          :is-remote-video-active="isRemoteVideoActive"
          :toggle-mute="toggleMute"
          :toggle-video="toggleVideo"
          :switch-to-voice-only="switchToVoiceOnly"
          :switch-to-video="switchToVideo"
          :handle-end-call="handleEndCall"
          :handle-close="handleClose"
        />
      </div>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { useVideoCall } from './VideoCall'
import VideoCallContent from './VideoCallContent.vue'

const props = defineProps<{
  modelValue: boolean
  targetUserId: string
  targetName: string
  currentUserId: string
  getUserInitial: (userId: string) => string
  isVoiceOnly?: boolean
  isGroupCall?: boolean // 是否是群聊通话
  groupMembers?: Array<{ member_id: string; displayName: string; alias?: string; avatar?: string; role?: number }> // 群聊成员列表
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'call-ended': []
  'switch-mode': [options: { isVoiceOnly: boolean }]
}>()

// 视频元素引用
const localVideoRef = ref<HTMLVideoElement | null>(null)
const remoteVideoRef = ref<HTMLVideoElement | null>(null)

// 使用业务逻辑
const {
  isOpen,
  isConnecting,
  loadingText,
  callStatus,
  isMuted,
  isVideoOff,
  isLocalVideoActive,
  isRemoteVideoActive,
  toggleMute,
  toggleVideo,
  switchToVoiceOnly,
  switchToVideo,
  handleEndCall,
  handleClose,
} = useVideoCall(props, emit, localVideoRef, remoteVideoRef)

// VideoCallContent 组件的引用
const videoCallContentRef = ref<InstanceType<typeof VideoCallContent> | null>(null)

// 使用 watch 同步子组件的 ref 到父组件
watch(videoCallContentRef, (newRef) => {
  if (newRef) {
    localVideoRef.value = newRef.localVideoRef
    remoteVideoRef.value = newRef.remoteVideoRef
  }
}, { immediate: true })

onMounted(() => {
  // 确保在挂载后同步 ref
  if (videoCallContentRef.value) {
    localVideoRef.value = videoCallContentRef.value.localVideoRef
    remoteVideoRef.value = videoCallContentRef.value.remoteVideoRef
  }
})

// 不再监听状态变化来调整尺寸，完全依赖 CSS 固定尺寸
</script>

<style lang="sass" scoped>
// 对话框样式
:deep(.video-call-dialog)
  .q-dialog
    width: 400px !important
    height: 500px !important
    max-width: 400px !important
    max-height: 500px !important
    min-width: 400px !important
    min-height: 500px !important

  &.voice-only .q-dialog
    height: 380px !important
    min-height: 380px !important
    max-height: 380px !important
    width: 400px !important
    max-width: 400px !important
    min-width: 400px !important

  .q-dialog__inner
    padding: 0 !important
    max-width: 400px !important
    max-height: 500px !important
    width: 400px !important
    height: 500px !important
    min-width: 400px !important
    min-height: 500px !important
    display: flex !important
    align-items: center !important
    justify-content: center !important
    background: transparent !important
    overflow: hidden !important
    resize: none !important
    box-sizing: border-box !important
    flex-shrink: 0 !important
    flex-grow: 0 !important
    margin: auto !important
    position: fixed !important
    top: 50% !important
    left: 50% !important
    transform: translate(-50%, -50%) !important

  &.voice-only .q-dialog__inner
    height: 380px !important
    min-height: 380px !important
    max-height: 380px !important
    width: 400px !important
    min-width: 400px !important
    max-width: 400px !important

  .q-dialog__backdrop
    background: rgba(0, 0, 0, 0.6) !important
    backdrop-filter: blur(4px)
    -webkit-backdrop-filter: blur(4px)

  .q-card
    width: 400px !important
    height: 500px !important
    max-width: 400px !important
    max-height: 500px !important
    min-width: 400px !important
    min-height: 500px !important
    border-radius: 20px
    overflow: hidden !important
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3)
    background: transparent !important
    resize: none !important
    user-select: none
    box-sizing: border-box !important
    flex-shrink: 0 !important
    flex-grow: 0 !important

  &.voice-only .q-card
    width: 400px !important
    height: 380px !important
    max-width: 400px !important
    max-height: 380px !important
    min-width: 400px !important
    min-height: 380px !important

.video-call-card
  background: transparent !important
  box-shadow: none !important

.video-call-container
  background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%)
  color: #FFFFFF
  display: flex
  flex-direction: column
  position: relative
  overflow: hidden

  // 对话框模式：固定大小
  &.video-call-dialog-container
    width: 400px !important
    height: 500px !important
    min-width: 400px !important
    min-height: 500px !important
    max-width: 400px !important
    max-height: 500px !important
    overflow: hidden !important
    resize: none !important
    box-sizing: border-box !important
    flex-shrink: 0 !important
    flex-grow: 0 !important
    position: relative !important
    display: flex !important
    flex-direction: column !important
    
    // 语音通话模式：缩小高度
    &.voice-only
      width: 400px !important
      height: 380px !important
      min-width: 400px !important
      min-height: 380px !important
      max-width: 400px !important
      max-height: 380px !important
      
      // 语音通话时，内容区域优化
      :deep(.video-call-content)
        padding: 40px 20px
        display: flex
        align-items: center
        justify-content: center
        // 固定高度：380px (总高度) - 70px (头部) - 80px (控制栏) = 230px
        height: 230px !important
        min-height: 230px !important
        max-height: 230px !important
        flex-shrink: 0 !important
        flex-grow: 0 !important
      
      // 语音通话时，控制栏优化，减少底部 padding，让图标更靠近底部
      :deep(.video-call-controls)
        padding: 16px 16px 28px !important
        overflow: visible !important
      
      // 语音通话时，优化头部 padding
      :deep(.video-call-header)
        padding: 20px 24px 16px !important


// 子组件样式穿透
:deep(.video-call-header)
  display: flex
  justify-content: space-between
  align-items: center
  padding: 20px 24px
  background: rgba(0, 0, 0, 0.35)
  backdrop-filter: blur(24px)
  -webkit-backdrop-filter: blur(24px)
  flex-shrink: 0 !important
  flex-grow: 0 !important
  z-index: 100
  position: relative
  border-bottom: 1px solid rgba(255, 255, 255, 0.1)
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2)
  height: 70px !important
  min-height: 70px !important
  max-height: 70px !important

  .call-info
    display: flex
    align-items: center
    gap: 16px

    .call-avatar
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2)
      border: 2px solid rgba(255, 255, 255, 0.25)
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
      
      &:hover
        transform: scale(1.05)
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3)
        border-color: rgba(255, 255, 255, 0.35)

  .call-details
    .call-title
      font-size: 18px
      font-weight: 500
      margin-bottom: 4px
      color: #FFFFFF
      letter-spacing: 0.3px

    .call-status
      display: flex
      align-items: center
      gap: 8px
      font-size: 13px
      color: rgba(255, 255, 255, 0.7)

      .status-icon
        &.rotating
          animation: rotate 1.5s linear infinite
          color: rgba(255, 255, 255, 0.7)

        &.connected
          color: #07C160
          animation: pulse-dot 2s ease-in-out infinite

      .status-text
        font-weight: 400
        letter-spacing: 0.2px

  .close-btn
    color: rgba(255, 255, 255, 0.8)
    transition: all 0.2s ease
    background: rgba(255, 255, 255, 0.1)
    border: none
    width: 36px
    height: 36px
    border-radius: 50%

    &:hover
      background: rgba(255, 255, 255, 0.2)
      color: #FFFFFF
      transform: scale(1.05)

// 视频内容区域
:deep(.video-call-content)
  display: flex
  align-items: center
  justify-content: center
  padding: 40px 20px
  position: relative
  overflow: hidden !important
  background: transparent
  box-sizing: border-box
  // 固定高度：500px (总高度) - 70px (头部) - 80px (控制栏) = 350px
  height: 350px !important
  min-height: 350px !important
  max-height: 350px !important
  flex-shrink: 0 !important
  flex-grow: 0 !important

  .video-container
    width: 100%
    height: 100%
    min-height: 0
    position: relative
    display: flex
    align-items: center
    justify-content: center
    flex-shrink: 1
    flex-grow: 1
    overflow: hidden !important
    box-sizing: border-box

    // 远程视频（对方）- 主画面
      .remote-video-wrapper
      width: 100%
      height: 100%
      position: absolute
      top: 0
      left: 0
      display: flex
      align-items: center
      justify-content: center
      background: #000000
      min-height: 100%
      max-height: 100%
      flex-shrink: 0
      flex-grow: 0

      .remote-video
        width: 100%
        height: 100%
        object-fit: cover
        opacity: 0
        transition: opacity 0.4s ease-in-out
        background: #000000
        position: absolute
        top: 0
        left: 0
        z-index: 2
        // 确保在没有 video-active 类时，视频元素完全隐藏
        visibility: hidden
        pointer-events: none

        &.video-active
          opacity: 1
          visibility: visible
          pointer-events: auto
          animation: fadeInVideo 0.5s ease-in-out

      .video-placeholder
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        gap: 0
        width: 100%
        height: 100%
        min-height: 100%
        max-height: 100%
        background: transparent
        position: absolute
        top: 0
        left: 0
        overflow: hidden
        padding: 40px 20px
        z-index: 1
        pointer-events: none
        box-sizing: border-box

        .voice-call-indicator
          display: flex
          flex-direction: column
          align-items: center
          gap: 24px
          color: rgba(255, 255, 255, 0.85)
          font-size: 16px
          font-weight: 400
          position: relative
          z-index: 1
          
          .q-icon
            width: 60px !important
            height: 60px !important
            min-width: 60px !important
            min-height: 60px !important
            font-size: 30px !important
            flex-shrink: 0
            display: flex
            align-items: center
            justify-content: center
            line-height: 1
            aspect-ratio: 1
            box-sizing: border-box
            color: rgba(255, 255, 255, 0.9) !important
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3))

        .video-call-indicator
          display: flex
          flex-direction: column
          align-items: center
          gap: 16px
          color: rgba(255, 255, 255, 0.85)
          font-size: 15px
          font-weight: 400
          position: relative
          z-index: 1
          
          .q-icon
            width: 60px !important
            height: 60px !important
            min-width: 60px !important
            min-height: 60px !important
            font-size: 30px !important
            flex-shrink: 0
            display: flex
            align-items: center
            justify-content: center
            line-height: 1
            aspect-ratio: 1
            box-sizing: border-box
            color: rgba(255, 255, 255, 0.9) !important
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3))

    // 本地视频（自己）- 小窗口
    .local-video-wrapper
      position: absolute
      bottom: 100px
      right: 20px
      width: 160px
      height: 120px
      border-radius: 16px
      overflow: hidden
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4)
      background: rgba(0, 0, 0, 0.5)
      z-index: 50
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
      cursor: pointer
      border: 2px solid rgba(255, 255, 255, 0.2)

      &:hover
        transform: scale(1.05) translateY(-2px)
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5)
        border-color: rgba(255, 255, 255, 0.3)

      &.video-hidden
        opacity: 0.6
        filter: grayscale(100%) brightness(0.7)
        border-color: rgba(255, 255, 255, 0.15)

      .local-video
        width: 100%
        height: 100%
        object-fit: cover
        opacity: 0
        transition: opacity 0.3s ease
        background: #000000
        // 确保在没有 video-active 类时，视频元素完全隐藏
        visibility: hidden
        pointer-events: none

        &.video-active
          opacity: 1
          visibility: visible
          pointer-events: auto
          animation: fadeInVideo 0.4s ease-in-out

      .local-video-placeholder
        width: 100%
        height: 100%
        display: flex
        align-items: center
        justify-content: center
        background: rgba(0, 0, 0, 0.6)
        backdrop-filter: blur(10px)
        position: absolute
        top: 0
        left: 0
        z-index: 1

        .local-placeholder-avatar
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)
          border: 2px solid rgba(255, 255, 255, 0.2)

        .local-video-off-indicator
          position: absolute
          bottom: 8px
          right: 8px
          width: 24px
          height: 24px
          border-radius: 50%
          background: #FF3B30
          display: flex
          align-items: center
          justify-content: center
          color: white
          box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4)
          z-index: 2

// 底部控制栏
:deep(.video-call-controls)
  padding: 16px 16px 32px
  margin-top: 0
  background: rgba(0, 0, 0, 0.35)
  backdrop-filter: blur(24px)
  -webkit-backdrop-filter: blur(24px)
  flex-shrink: 0 !important
  flex-grow: 0 !important
  z-index: 100
  position: relative
  border-top: 1px solid rgba(255, 255, 255, 0.1)
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2)
  overflow: visible !important
  box-sizing: border-box
  width: 100%
  max-width: 100%
  min-width: 0
  height: 80px !important
  min-height: 80px !important
  max-height: 80px !important
  

  .controls-row
    display: flex
    justify-content: center
    align-items: center
    gap: 32px
    flex-wrap: nowrap
    max-width: 100%
    width: 100%
    box-sizing: border-box
    padding: 0
    margin: 0
    overflow: visible
    margin-top: 0

    .control-item
      display: flex
      flex-direction: column
      align-items: center
      justify-content: center
      gap: 8px
      flex-shrink: 0
      flex-grow: 0
      min-width: fit-content
      max-width: 100%
      box-sizing: border-box
      position: relative

      .control-label
        font-size: 12px
        color: rgba(255, 255, 255, 0.7)
        font-weight: 400
        text-align: center
        white-space: nowrap
        transition: color 0.3s ease
        overflow: visible
        text-overflow: clip
        max-width: none
        display: block
        letter-spacing: 0.2px
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
        margin-top: 0

      &.end-call-item
        flex-shrink: 0
        flex-grow: 0
        margin-left: 12px
        margin-right: 0

        .end-call-label
          font-size: 13px
          font-weight: 500
          color: #FFFFFF
          letter-spacing: 0.3px
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3)

    .control-btn
      width: 64px
      height: 64px
      min-width: 64px
      max-width: 64px
      border-radius: 50%
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
      position: relative
      overflow: hidden
      border: none
      display: flex
      align-items: center
      justify-content: center
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2)
      flex-shrink: 0
      flex-grow: 0
      box-sizing: border-box
      margin: 0
      padding: 0
      
      // 确保图标不变形（视频通话模式）
      :deep(.q-icon)
        width: 16px !important
        height: 16px !important
        min-width: 16px !important
        min-height: 16px !important
        font-size: 16px !important
        flex-shrink: 0
        display: flex
        align-items: center
        justify-content: center
        line-height: 1
        aspect-ratio: 1
        box-sizing: border-box

      &::before
        content: ''
        position: absolute
        top: 50%
        left: 50%
        width: 0
        height: 0
        border-radius: 50%
        background: rgba(255, 255, 255, 0.2)
        transform: translate(-50%, -50%)
        transition: width 0.3s ease, height 0.3s ease

      &:active::before
        width: 100%
        height: 100%

      &:hover
        transform: scale(1.08) translateY(-2px)
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3)

      // 静音按钮
      &.mute-btn
        background: rgba(255, 255, 255, 0.18)
        color: #FFFFFF
        backdrop-filter: blur(10px)

        &.active
          background: #FF3B30
          color: white
          box-shadow: 0 6px 20px rgba(255, 59, 48, 0.5), 0 2px 8px rgba(255, 59, 48, 0.3)

        &:hover
          background: rgba(255, 255, 255, 0.28)
          transform: scale(1.08) translateY(-2px)
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3)

          &.active
            background: #FF5247
            box-shadow: 0 8px 24px rgba(255, 59, 48, 0.6), 0 2px 12px rgba(255, 59, 48, 0.4)

      // 视频按钮
      &.video-btn
        background: rgba(255, 255, 255, 0.18)
        color: #FFFFFF
        backdrop-filter: blur(10px)

        &.active
          background: #FF3B30
          color: white
          box-shadow: 0 6px 20px rgba(255, 59, 48, 0.5), 0 2px 8px rgba(255, 59, 48, 0.3)

        &:hover
          background: rgba(255, 255, 255, 0.28)
          transform: scale(1.08) translateY(-2px)
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3)

          &.active
            background: #FF5247
            box-shadow: 0 8px 24px rgba(255, 59, 48, 0.6), 0 2px 12px rgba(255, 59, 48, 0.4)

      // 升级按钮（语音升级到视频）- 微信绿色
      &.upgrade-btn
        background: #07C160
        color: white
        box-shadow: 0 6px 20px rgba(7, 193, 96, 0.5), 0 2px 8px rgba(7, 193, 96, 0.3)

        &:hover
          background: #06B050
          box-shadow: 0 8px 24px rgba(7, 193, 96, 0.6), 0 2px 12px rgba(7, 193, 96, 0.4)
          transform: scale(1.08) translateY(-2px)

      // 降级按钮（视频切换到语音）
      &.downgrade-btn
        background: rgba(255, 255, 255, 0.18)
        color: #FFFFFF
        backdrop-filter: blur(10px)

        &:hover
          background: rgba(255, 255, 255, 0.28)
          transform: scale(1.08) translateY(-2px)
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3)

      // 挂断按钮（更大，更突出）
      &.end-call-btn
        width: 68px
        height: 68px
        min-width: 68px
        max-width: 68px
        background: #FF3B30
        color: white
        box-shadow: 0 8px 24px rgba(255, 59, 48, 0.6), 0 2px 12px rgba(255, 59, 48, 0.4)
        border: none
        flex-shrink: 0
        flex-grow: 0
        
        :deep(.q-icon)
          width: 16px !important
          height: 16px !important
          min-width: 16px !important
          min-height: 16px !important
          font-size: 16px !important

        &:hover
          background: #FF5247
          box-shadow: 0 10px 28px rgba(255, 59, 48, 0.7), 0 2px 16px rgba(255, 59, 48, 0.5)
          transform: scale(1.08) translateY(-2px)

        &:active
          transform: scale(1.05) translateY(-1px)
          box-shadow: 0 6px 20px rgba(255, 59, 48, 0.5), 0 2px 8px rgba(255, 59, 48, 0.3)

// 加载提示
:deep(.call-loading)
  background: rgba(0, 0, 0, 0.5)
  backdrop-filter: blur(20px) saturate(180%)
  -webkit-backdrop-filter: blur(20px) saturate(180%)
  position: absolute !important
  top: 0 !important
  left: 0 !important
  right: 0 !important
  bottom: 0 !important
  width: 100% !important
  height: 100% !important
  z-index: 200 !important
  pointer-events: auto !important
  // 确保加载提示不影响对话框高度
  margin: 0 !important
  padding: 0 !important
  box-sizing: border-box !important

  .loading-content
    display: flex
    flex-direction: column
    align-items: center
    gap: 24px

    .loading-spinner
      color: #07C160

    .loading-text
      color: #FFFFFF
      font-size: 18px
      font-weight: 500
      letter-spacing: 0.5px

    .loading-subtitle
      color: rgba(255, 255, 255, 0.7)
      font-size: 14px
      font-weight: 400
      letter-spacing: 0.3px

// 旋转动画
@keyframes rotate
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)

// 脉冲动画（用于连接状态指示器）
@keyframes pulse-dot
  0%, 100%
    opacity: 0.6
    transform: scale(1)
  50%
    opacity: 1
    transform: scale(1.1)

// 视频淡入动画
@keyframes fadeInVideo
  from
    opacity: 0
    transform: scale(1.05)
  to
    opacity: 1
    transform: scale(1)

// 对话框模式下的样式调整（600x450 小窗口）
.video-call-dialog-container
  // 顶部信息栏
  :deep(.video-call-header)
    padding: 16px 20px

    .call-info
      gap: 12px

      .call-avatar
        width: 40px !important
        height: 40px !important
        font-size: 16px !important

    .call-details
      .call-title
        font-size: 16px
        margin-bottom: 3px

      .call-status
        font-size: 12px

    .close-btn
      width: 32px !important
      height: 32px !important

  // 本地视频窗口
  :deep(.local-video-wrapper)
    width: 120px !important
    height: 90px !important
    bottom: 80px !important
    right: 12px !important
    border-radius: 12px

  // 控制栏
  :deep(.video-call-controls)
    padding: 16px 12px 32px !important
    margin-top: 0 !important
    max-width: 100% !important
    overflow: visible !important
    
    // 语音通话时，控制栏优化
    .voice-only &
      padding: 16px 12px 28px !important
      overflow: visible !important

    .controls-row
      gap: 32px !important
      margin-top: 0 !important
      
      .control-item
        gap: 8px !important
      max-width: 100% !important
      padding: 0 4px !important
      box-sizing: border-box !important

      .control-item
        gap: 8px !important
        flex-shrink: 0 !important
        flex-grow: 0 !important

        .control-label
          font-size: 11px
          max-width: none !important
          overflow: visible !important
          text-overflow: clip !important
          margin-top: 0 !important

      .control-btn
        width: 56px !important
        height: 56px !important
        min-width: 56px !important
        max-width: 56px !important
        font-size: 20px !important
        flex-shrink: 0 !important
        flex-grow: 0 !important
        
        // 确保图标不变形
        :deep(.q-icon)
          width: 24px !important
          height: 24px !important
          min-width: 24px !important
          min-height: 24px !important
          font-size: 22px !important
          flex-shrink: 0 !important
          display: flex !important
          align-items: center !important
          justify-content: center !important
          line-height: 1 !important
          aspect-ratio: 1 !important
          box-sizing: border-box !important

        &.end-call-btn
          width: 60px !important
          height: 60px !important
          min-width: 60px !important
          max-width: 60px !important
          
          :deep(.q-icon)
            width: 16px !important
            height: 16px !important
            min-width: 16px !important
            min-height: 16px !important
            font-size: 16px !important

      .end-call-item
        margin-left: 8px !important
        margin-right: 0 !important
        flex-shrink: 0 !important

  // 占位符
  :deep(.video-placeholder)
    padding: 40px 20px !important
    padding-bottom: 20px !important
    
    .voice-call-indicator
      font-size: 14px !important
      gap: 20px !important

    .video-call-indicator
      font-size: 13px !important

// 响应式设计
@media (max-width: 768px)
  :deep(.local-video-wrapper)
    width: 140px !important
    height: 105px !important
    bottom: 100px !important
    right: 16px !important

  :deep(.video-call-controls)
    padding: 16px 16px 32px !important
    overflow: visible !important
    max-width: 100% !important
    overflow: hidden !important

    .controls-row
      gap: 14px !important
      max-width: 100% !important
      padding: 0 4px !important
      box-sizing: border-box !important

      .control-item
        flex-shrink: 0 !important
        flex-grow: 0 !important

        .control-label
          max-width: 100% !important
          overflow: hidden !important
          text-overflow: ellipsis !important

      .control-btn
        width: 64px !important
        height: 64px !important
        min-width: 64px !important
        max-width: 64px !important
        flex-shrink: 0 !important
        flex-grow: 0 !important
        
        :deep(.q-icon)
          width: 28px !important
          height: 28px !important
          min-width: 28px !important
          min-height: 28px !important
          font-size: 24px !important
          flex-shrink: 0 !important
          display: flex !important
          align-items: center !important
          justify-content: center !important
          line-height: 1 !important
          aspect-ratio: 1 !important
          box-sizing: border-box !important

        &.end-call-btn
          width: 68px !important
          height: 68px !important
          min-width: 68px !important
          max-width: 68px !important
          
          :deep(.q-icon)
            width: 16px !important
            height: 16px !important
            min-width: 16px !important
            min-height: 16px !important
            font-size: 16px !important
</style>
